//获取搜索按钮
var inputBtn = document.querySelector('.inputbox button')
//获取输入框
var inputEle = document.querySelector('.inputbox input')

//获取localStorage中存储的用户信息
var userinfo = JSON.parse(localStorage.getItem('userinfo'))
//渲染用户信息到首页
document.querySelector('.username').innerHTML = userinfo.name

//点击搜索按钮，发起ajax请求，传参数给服务器，服务器端返回搜索结果
inputBtn.onclick = () => {
    axios.get('/user/search', { params: { searchkey: inputEle.value } }).then((res) => {
        render(res.data.list)
        console.log(res.data);
    })
}

//给tbody添加点击事件(事件委托)
var tablebody = document.querySelector('tbody')
tablebody.onclick = (e) => {
    //e.target.tagName=='SPAN' 判断是不是span标签
    //e.target.classList.contains('.shanchu') 判断是不是包含.shanchu这个类名
    if (e.target.tagName == 'SPAN' && e.target.classList.contains('icon-shanchu')) {
        //先获取这个删除按钮对应用户的手机号
        //发起删除请求，删除服务器端的用户
        // console.log(e.target.dataset.phone);
        axios.post('/user/delete', { phone: e.target.dataset.phone }).then((res) => {
            console.log(res.data);
            //如果想要在发请求给服务器,删除成功之后, 同时让页面也看到删除后的效果,有两种方案
            //方案一: 本地删除这个dom节点
            //e.target.parentNode.parentNode.remove();
            //方案二: 让删除接口 返回删除后的新数据, 本地调用render方法重新渲染.
            render(res.data.list)
        })
    }
}

//渲染列表
function render(data) {
    var str = ''
    str = data.map((item, index) => {
        return `<tr>
                    <td>${item.email}</td>
                    <td>${item.name}</td>
                    <td>${item.phone}</td>
                    <td>${item.ingroup}</td>
                    <td class="${item.isadmin ? '' : 'error'}">${item.isadmin ? '是' : '否'}</td>
                    <td> <span class="statusok">${item.status ? '正常' : '异常'}</span> </td>
                    <td> <span class="iconfont icon-bianji editicon" id="101"></span><span class="iconfont icon-shanchu deleteicon" data-phone="${item.phone}"></span></td>
                </tr>
        `
    }).join('')
    // if (str == '') {
    //     str ==<tr style="text-align:center;color:red">未查询到数据！</tr>
    // }
    document.querySelector('tbody').innerHTML = str
}

var page = 1
//axios是从axios.min.js文件中暴露的  用来发送ajax请求的一个对象
axios.get('/user/list', { params: { page: page, count: 3 } }).then((res) => {
    //调用render方法，传入后端返回的数据  渲染列表
    render(res.data.list)
    console.log(res.data);
})


var next = document.querySelector('.next')
next.onclick = function () {
    page++
    axios.get('/user/list', { params: { page: page, count: 3 } }).then((res) => {
        render(res.data.list)
    })

}
// 上一页
var prev = document.querySelector('.prev')
prev.onclick = function () {
    page--
    if (page <= 0) {
        page = 1
    }
    axios.get('/user/list', { params: { page: page, count: 3 } }).then((res) => {
        render(res.data.list)
    })
}

axios.post('/user/login', { phpne: '18292956504', pass: '1234' }).then((res) => {
    console.log(res.data);
})